<template>
  <div
    v-if="props.showText || inputDisabled"
    v-html="props.modelValue"
    style="width: 100%;"
    class="html-box"
  ></div>
  <div v-else style="width: 100%;">
    <div style="width: 100%;border: 1px solid #ccc">
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        style="height: 400px; overflow-y: hidden"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {ref, onMounted, watch, shallowRef, onBeforeUnmount} from "vue";
import {useDisabled} from 'element-plus';
import api from '@/http/api'

const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  isClear: {
    type: Boolean,
    default: false
  },
  height: {
    type: Number,
    default: 500
  },
  mode: {
    type: String,
    default: 'default'
  },
  showText: Boolean
});

const editorRef = shallowRef();
const loading = ref(false);
const inputDisabled = useDisabled();
const valueHtml = ref('')
const toolbarConfig = ref({});
const editorConfig = ref({MENU_CONF: []});

editorConfig.value.MENU_CONF['uploadImage'] = {
  // 自定义上传
  async customUpload(file, insertFn) {
    api.upload({'file': file}).then((res) => {
      loading.value = false;
      insertFn(import.meta.env.VITE_BASE_AFFIX_PATH + 'image/' + res.data.id);
    }).catch(() => {
      loading.value = false;
    });
  }
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  editor.setHtml(valueHtml.value || '');
};

const handleChange = (editor) => {
  emit('update:modelValue', editor.getHtml());
  emit('change', editor.getHtml());
};

const customPaste = (editor, event) => {
  let content = event.text;
  content = content.replace(/&nbsp;/ig, '');
  content = content.replace(/<o:p><\/o:p>/g, '');
  content = content.replace(/<o><\/o>/ig, '');
  content = content.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
  content = content.replace(/<style>[\s\S]*?<\/style>/ig, '');
  content = content.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/ig, '<$1>');
  content = content.replace(/<span>([\s\S]*?)<\/span>/ig, '$1');
  content = content.replace(/<br\/>/g,"");
  content = content.replace(/<br>/g,"");

  editor.insertText(content);
};

watch(() => props.modelValue, (newVal) => {
  valueHtml.value = newVal || '';
});

watch(() => props.isClear, (newVal) => {
  if (newVal) {
    valueHtml.value = '';
  }
});

onMounted(() => {
  valueHtml.value = props.modelValue || '';
});

onBeforeUnmount(() => {
  if (!inputDisabled) {
    const editor = editorRef.value;
    if (editor == null) return;

    editor.destroy();
  }
});
</script>

<style>
.w-e-toolbar {
  z-index: 503!important;
}
.w-e-menu {
  z-index: 502!important;
}
.w-e-text-container{
  z-index: 501!important;
}
</style>

<style scoped>
.html-box {
  min-height: 100px;
  max-height: 500px;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  background: #F5F7FA;
  padding: 10px 10px;
}
</style>
